<template>
  <view class="suggestion flex-column">
    <view class="tips flex">
      <img src="../../../static/images/suggestion.svg" />
      <span class="text ml-16">你的任何奇思妙想都可以记录在这里~</span>
    </view>

    <view class="type">
      <view class="title flex"
        >内容类型<span style="color: #f22; margin-left: 4px">*</span></view
      >
      <view class="type-list flex">
        <view
          class="type-item"
          :class="{ active: type === '1' }"
          @click="changeType('1')"
          >意见与建议</view
        >
        <view
          class="type-item btn-2"
          :class="{ active: type === '2' }"
          @click="changeType('2')"
          >功能缺陷</view
        >
      </view>
    </view>

    <view class="desc">
      <view class="title">内容描述</view>
      <wd-textarea
        v-model="inputValue"
        placeholder="详细描述建议或问题"
      ></wd-textarea>
    </view>

    <view class="commit">
      <wd-button type="primary" @click="commit">提交</wd-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

import { addSuggestionList } from "../../../api/suggestion";
import { getUserInfo } from "../../../api/wechat";
import { debounce, toast } from "../../../utils/common";

const type = ref("1");

const changeType = (value) => {
  type.value = value;
  inputValue.value = "";
};
const inputValue = ref(null);

const commit = debounce(
  async () => {
    if (!inputValue.value) {
      toast({
        title: "忘记填写内容啦~",
        icon: "error",
      });
      return;
    }

    getUserInfo({
      openId: uni.getStorageSync("openId"),
    }).then((res) => {
      if (res.code === 0) {
        addSuggestionList({
          name: res.data.nickname,
          content: inputValue.value,
          type: type.value,
          open_id: uni.getStorageSync("openId"),
          url: res.data.avatar_url,
        }).then((res1) => {
          if (res1.code === 0) {
            toast({
              title: "意见已收到，火速处理中!",
            });
            inputValue.value = "";
          }
        });
      }
    });
  },
  1000,
  true
);
</script>

<style scoped lang="scss">
.suggestion {
  background-color: #f7f7f7;
  color: #333;
  height: 100%;
  padding: 16rpx 4%;
  box-sizing: border-box;
  letter-spacing: 0.5px;
  background-image: linear-gradient(to bottom, #f0f4ff 0%, #e8f5e9 100%);

  .tips {
    background-color: #fff;
    border-radius: 16px;
    padding: 16rpx;
    align-items: center;
    font-size: 26rpx;

    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .type {
    .title {
      margin: 24rpx 0;
    }

    &-item {
      background-color: #d2d4d4;
      padding: 8rpx 16rpx;
      border-radius: 16px;
      font-size: 28rpx;

      &.active {
        background-color: #4d80f0;
        color: #fff;
      }

      &.btn-2 {
        margin-left: 16rpx;
      }
    }
  }

  .desc {
    margin-top: 24rpx;

    :deep(.wd-textarea) {
      margin-top: 24rpx;
    }
  }

  .commit {
    margin-top: 48rpx;
    align-self: flex-end;
  }
}
</style>
